@let user = user$ | async;

<div class="user">
  @if (!user) {
    <button aria-label="user login" color="primary" (click)="onLogin()" mat-mini-fab>
      <mat-icon>person</mat-icon>
    </button>
  } @else {
    @if (!user.picture) {
      <button aria-label="user name" mat-mini-fab color="primary" (click)="openDialog()">
        <h3 class="name">
          {{ name() }}
        </h3>
      </button>
    } @else {
      <img
        class="user-picture"
        (click)="openDialog()"
        [src]="user.picture"
        alt="{{ user.display_name }}"
      />
    }
  }
</div>
